<template>
  <div ref="mapContainer" style="width: 100%; height: 500px;"></div>
</template>

<script>
import * as echarts from 'echarts';
import shenyangMapData from '@/assets/maps/shenyang.json';

export default {
  name: 'ShenyangMap',
  props: {
    mapData: {
      type: Array,
      required: true
    },
    type: {
      type: String,
      required: true,
      validator: value => ['credit', 'income'].includes(value)
    }
  },
  data() {
    return {
      chart: null
    };
  },
  watch: {
    // 深度监听数据和类型变化
    type: {
      handler() {
        this.refreshMap();
      },
      immediate: true
    },
    mapData: {
      handler() {
        this.refreshMap();
      },
      deep: true
    }
  },
  mounted() {
    this.initMap();
    // 添加窗口大小变化监听
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    // 组件销毁时移除监听和图表实例
    window.removeEventListener('resize', this.handleResize);
    if (this.chart) {
      this.chart.dispose();
    }
  },
  methods: {
    initMap() {
      this.chart = echarts.init(this.$refs.mapContainer);
      echarts.registerMap('shenyang', shenyangMapData);
      this.refreshMap();
    },
    refreshMap() {
      if (!this.chart) return;
      
      // 正确映射数据类型
      const dataKey = this.type === 'credit' ? 'score' : 'income';
      const titleText = this.type === 'credit' 
        ? '沈阳市信用分分布' 
        : '沈阳市收入分布';
      const unit = this.type === 'credit' ? '分' : '元';

      // 确保数据有效
      const validData = this.mapData.filter(item => 
        item[dataKey] !== undefined && item[dataKey] !== null
      );

      // 计算数据范围
      const values = validData.map(item => item[dataKey]);
      const min = Math.min(...values);
      const max = Math.max(...values);

      const option = {
        title: {
          text: titleText,
          left: 'center',
          textStyle: {
            fontSize: 16,
            fontWeight: 'bold'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: (params) => {
            const data = validData.find(item => item.name === params.name);
            return data 
              ? `${params.name}<br/>${titleText}: ${data[dataKey]}${unit}`
              : params.name;
          }
        },
        visualMap: {
          type: 'continuous',
          min,
          max,
          text: ['高', '低'],
          inRange: {
            color: this.type === 'credit' 
              ? ['#e0f3f8', '#abd9e9', '#74add1', '#4575b4', '#313695'] // 蓝色系
              : ['#fff7fb', '#ece7f2', '#d0d1e6', '#a6bddb', '#74a9cf'] // 绿色系
          },
          calculable: true,
          left: 'left',
          bottom: '10%'
        },
        series: [
          {
            name: titleText,
            type: 'map',
            map: 'shenyang',
            roam: true,
            zoom: 1.1,
            emphasis: {
              label: {
                show: true,
                fontSize: 14
              },
              itemStyle: {
                areaColor: '#a7d5ed'
              }
            },
            data: validData.map(item => ({
              name: item.name,
              value: item[dataKey]
            }))
          }
        ]
      };

      this.chart.setOption(option);
      this.chart.resize();
    },
    handleResize() {
      if (this.chart) {
        this.chart.resize();
      }
    }
  }
};
</script>

<style scoped>
/* 确保地图容器有最小高度 */
.map-container {
  min-height: 400px;
}
</style>